<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS属性练习</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<style type="text/css">
body, div {
	padding: 10px
}

div {
	border: 1px solid #777;
}

body>div:nth-child(1) {
	float: left;
	width: 35%
}

body>div:nth-child(2) {
	float: right;
	width: 60%
}
li{
	padding: 2px
}
li:hover{
	background-color: #888;
	color: #fff;
}
li>*:nth-child(2),li>*:nth-child(3){
	float: right;
}
li>span{
	width:60%;
}
li>input{
	width:30%
}
h1{
	background-color: #eee
}
#d1{
	height: 300px;
	background-color: #ddd;
	overflow: auto;
}
#d2{
	width: 90%;
	height: 200px;
	color: white;
	background-color: green;
	overflow: auto;
}

</style>
</head>
<body>
	<div>
		<h1>盒子模型</h1>
		<div id="d1"><div id="d2">
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
<p style="text-align: center;"><img src="box.jpg"></p>
		</div></div>
	</div>
	<div id="lx">
		<h2>请按照要求完成对左边的<font color="green">绿色的DIV</font>的样式进行修改</h2>
		<fieldset style="background: #eee;border: 1px solid;">
			<legend>注意!</legend>
			由于div大小或位置设置原因, 可能某些样式设置会看不出效果
		</fieldset>
		<ol>
			<li v-for="(q,index) in qlist">
				<span>{{q.name}}</span>:
				<img v-bind:style="q" src="OK.png" width="20px" >
				<input v-bind:answer="q.answer" placeholder="请填写样式，例：color:green"
					v-on:click="a(q)"
					v-on:change="answer(q)" v-bind:value="q.answer">
			</li>
		</ol>
	</div>

	<script type="text/javascript">
		var qlist=[
			{name:'设置宽度为80像素',answer:'width:80px'},
			{name:'设置高度为80像素',answer:'height:80px'},
			{name:'设置宽度为70%',answer:'width:70%'},
			{name:'设置高度为百分之50',answer:'height:50%'},
			{name:'设置宽度为120px',answer:'width:120px'},
			{name:'设置高度为120px',answer:'height:120px'},
			{name:'设置外距为20px',answer:'margin:20px'},
			{name:'设置上外边距为30px',answer:'margin-top:30px'},
			{name:'设置下外边距为30px',answer:'margin-bottom:30px'},
			{name:'设置内距为20px',answer:'padding:20px'},
			{name:'设置左内边距为30px',answer:'padding-left:30px'},
			{name:'设置右内边距为30px',answer:'padding-right:30px'},
			{name:'设置内距为5%',answer:'padding:5%'},
			{name:'设置上内边距为10%',answer:'padding-top:10%'},
			{name:'设置下内边距为10%',answer:'padding-bottom:10%'},
			{name:'设置外边距为百分之8',answer:'margin:8%'},
			{name:'设置左外边距为百分之10',answer:'margin-left:10%'},
			{name:'设置右外边距为百分之15',answer:'margin-right:15%'},
		];
		qlist.sort((a,b)=>{return Math.random()>.5 ? -1 : 1});
		qlist.push({name:'同时设置内边距, 上下为10%,左右为5%',answer:'padding:10% 5%'});
		qlist.push({name:'同时设置内边距, 上为20px,左右为40px,下为60px',answer:'padding:20px 40px 60px'});
		qlist.push({name:'同时设置内边距, 上下左右分别为: 20px,5%,5px,10%',answer:'padding:20px 10% 5% 5px'});
		qlist.push({name:'同时设置外边距, 上下左右分别为: 20px,10px',answer:'margin:20px 10px'});
		qlist.push({name:'同时设置外边距, 上为10px,左右为30px,下为50px',answer:'margin:10px 30px 50px'});
		qlist.push({name:'同时设置外边距, 上下左右分别为: 10px,10%,15px,5%',answer:'margin:10px 5% 10% 15px'});
		qlist.push({name:'设置外边距,上下为20px,左右居中',answer:'margin:20px auto'});

		var lx = new Vue({
			el : '#lx',
			data : {
				qlist:qlist,
			},
			methods:{
				answer: function(q){
					if(event.srcElement.value){
						var a1 = event.srcElement.value;
						var a2 = q.answer;
						var arr = a1.split(":");
						$("#d2").css(arr[0],arr[1]);
						a1 = a1.replace(/\s+/g, '');
						a2 = a2.replace(/\s+/g, '');
						a1 = a1.toLowerCase();
						a2 = a2.toLowerCase();
						q.visibility = a1 == a2 ? 'visible':'hidden';
					}
				},
				a: function(q){
					if(event.altKey){
						event.srcElement.value = q.answer;
						this.$options.methods.answer(q);
					}
				}
			}
		})

	</script>
</body>
</html>
